<template>
  <chart :options="options" />
</template>
<script>
export default {
  name: "echartsRadiusPie",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legend: {
      type: Array,
      default: () => {
        return [];
      },
    },
    colors: {
      type: Array,
      default: () => {
        return null;
      },
    },
    text: {
      type: String,
      default: () => {
        return "";
      },
    },
    subtext: {
      type: String,
      default: () => {
        return "";
      },
    },
    roseType: {
      type: String,
      default: () => {
        return "";
      },
    },
    radius: {
      type: Array,
      default: () => {
        return [];
      },
    },
    labelLine: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    label: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    position: {
      type: String,
      default: () => {
        return "outside";
      },
    },
    left: {
      type: String,
      default: () => {
        return "right";
      },
    },
    top: {
      type: String,
      default: () => {
        return "middle";
      },
    },
    orient: {
      type: String,
      default: () => {
        return "vertical";
      },
    },
    length: {
      type: Number,
      default: () => {
        return null;
      },
    },
    length2: {
      type: Number,
      default: () => {
        return null;
      },
    },
    fontSize: {
      type: Number,
      default: () => {
        return 24;
      },
    },
    center: {
      type: Array,
      default: () => {
        return ["50%", "50%"];
      },
    },
    roundCap: {
      type: Number,
      default: () => {
        return null;
      },
    },
    subfontSize: {
      type: Number,
      default: () => {
        return 48;
      },
    },
    num: {
      type: Number,
      default: () => {
        return null;
      },
    },
    unit: {
      type: String,
      default: () => {
        return '';
      },
    },
    itemWidth: {
      type: Number,
      default: () => {
        return 24;
      },
    },
    itemHeight: {
      type: Number,
      default: () => {
        return 12;
      },
    },
    subtexty:{
      type: String,
      default: () => {
        return '37%';
      },
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      let _this = this
      return {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: "center",
          y: this.subtexty,
          textStyle: {
            color: "#fff",
            fontSize: 24,
            fontWeight:400
          },
          subtextStyle: {
            color: "#fff",
            fontSize: this.subfontSize,
            fontWeight:400,
            fontFamily: 'LESLIE-Regular, LESLIE',
          },
        },
        tooltip: {
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          type: "scroll",
          orient: this.orient,
          left: this.left,
          align: "auto",
          top: this.top,
          itemWidth: this.itemWidth,
          itemHeight: this.itemHeight,
          textStyle: {
            color: "#B2CBFF",
          },
          data: this.legend,
          // formatter: function (parms) {
          //   console.log(parms,"parms")
          // },
          
        },
        color: this.colors,
        series: [
          {
            type: "pie",
            z: 3,
            selectedMode: 'single',
            center: this.center,
            radius: this.radius,
            clockwise: true,
            avoidLabelOverlap: true,
            roseType: this.roseType,
            hoverOffset: 15,
            label: {
              show: this.label,
              position: this.position,
              formatter: function(params){
                if(_this.num !=null ){
                  return params.name + '\n'+'\n' + params.value + _this.unit
                }else{
                  return params.name + '\n'+'\n' + params.percent + '%'
                }
              },
              // formatter: "{b|{b}} \n\n  {c|{d}}",
              padding: [70, -40],
              textStyle: {
                fontWeight: 400,
                fontSize: this.fontSize, //文字的字体大小
                color: "#fff",
              },
              // formatter:'{d}%'
              // },
              rich: {
                a: {
                  padding: [-10, 15, -20, 15],
                },
              },
            },
            labelLine: {
              normal: {
                show: this.labelLine,
                lineStyle: {
                  // color: "rgba(171, 191, 213, 1)",
                  width: 1,
                },
                length: this.length,
                length2: this.length2,
              },
            },
            data: this.data,
            roundCap: true,
          },
        ],
      };
    },
  },
};
</script>